import $ from 'zepto';
import './css/index.scss';
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';

$(function () {
    var swiper = new Swiper('.swiper-container', {
        effect: 'coverflow',
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 'auto',
        loop: true,
        coverflowEffect: {
            rotate: 50,
            stretch: 0,
            depth: 100,
            modifier: 1,
            slideShadows: true,
        }
    });

    var mask = $('#mask')
    $("#dts_header").show();

    $("#account_button").on('click', function (e) {
        $("#account").show();
        mask.css("display", "block");

        $("#close_box").on('click', function () {
            $("#account").css("display", "none");
            mask.css("display", "none");

        });


        var accountList = $("#account_items");
        for (var i = 0; i < accountList.length; i++) {
            $("li").on('click', function () {
                $(this).siblings().removeClass('active');
                $(this).addClass('active');
                var j = $(this).index();
                
                var bodyLi = $("#account_body").find("li").eq(j);
                bodyLi.show();
                bodyLi.siblings().css("display", "none");
            });
        }
    });

});